<!DOCTYPE html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <idcard :name="'xxx名称'" :idcard="'xxxx身份证'" :log="[]"></idcard>
  <!-- <idcard :idcard="'xxxx22身份证'" :log="[]"></idcard> -->
  <idcard v-for="(item, index) in userList" :name="item.name" :idcard="item.idcard" :sex="item.sex" ></idcard>
  <!-- <idcard></idcard>
  <idcard></idcard> -->
</div>

<script>
var idcard = {
  // 定义可以传递给组件的字段参数
  // props: [ 'name', 'idcard', 'sex' ], // 数组形式定义
  // 对象形式定义
  props: {
    name: {
      required: true, // 定义参数是否必须传入
    },
    idcard: {},
    sex: {
      type: String, // 定义字段的数据类型
      default: '未定义', // default: 定义字段的默认值
    },
    log: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 三维
    sanwei: {
      type: Object,
      default: () => {
        return {
          xiong: '',
          yao: '',
          tui: '',
        }
      }
    }
  },
  template: '<div><div>名称: {{ name }}</div><div>身份证: {{ idcard }}</div><div>性别: {{ sex }}</div></div>',
  data() {
    return {
    }
  },
}

// Vue.component('list', list)
Vue.component('idcard', idcard)

var vm = new Vue({
  el: '#app',
  data: {
    userList: [
      {
        name: '用户1',
        idcard: '123',
        sex: '男'
      },
      {
        name: '用户2',
        idcard: '456',
        sex: '女'
      },
      {
        name: '用户3',
        idcard: '789',
        sex: '不男不女'
      },
    ],
  },
})
</script>

<script src="">
// 组件传参
// 定义: 组件内通过定义props, 来指定可以传递给组件的参数, 如: props: [ 'name' ]
// 传参: 使用组件的时候, 通过设置props对应的属性值来进行参数传递, 如: <template :name="'张三'"></template>

// props的定义可以用数组, 也可以用对象, 
// 使用数组形式定义的时候, 数组的每一项内容就是字段的名称, 如props: [ 'name', 'idcard' ], 在vue-cli工程内不允许使用这样的方式定义, 
// 使用对象的形式定义的时候, 对象的key就是字段的key, 如: props: { name: { default: '张三那', type: String } }, 在vue-cli工程内,使用对象的形式来定义props, 使用对象形式定义可以设置字段的数据类型: type, 数据的默认值: default
// 在props内定义的参数不能和data, computed的字段重复,
// 在props内如果将参数定义为type = Array/Object, default的内容不能直接写数据, 必须用一个函数来返回, 
// 如: 
// props: { 
//  user: { 
//    type: Object, 
//    default: () => { 
//      return: {} 
//    } 
//  } 
//}
</script>
